<template>
  <AxiomVerticalLayout ref="verticalLayoutRef" class="chat-panel">
    <template #default>
      <AxiomGroup
        class="message-container"
        direction="vertical"
        gap="large"
      >
        <AxiomGroup
          v-for="message in messages"
          :key="message.id"
          :justify="message.role === 'user' ? 'end' : 'start'"
        >
          <div class="message-content">
            <AxiomBlockquote v-if="message.role === 'user'">{{ message.content }}</AxiomBlockquote>
            <div v-else class="assistant-response">
              <!-- 渲染结构化结果 -->
              <AxiomGroup v-if="typeof message.content === 'object' && message.content.results" direction="vertical" gap="large">
                <AxiomCard v-for="(result, index) in message.content.results" :key="result.node_id || index" shadow="hover">
                  <template #header>
                    <AxiomGroup justify="space-between" align="center">
                      <AxiomGroup gap="small" align="center">
                        <AxiomIcon name="Document" />
                        <AxiomText size="small" type="secondary">{{ result.document_name }}</AxiomText>
                      </AxiomGroup>
                      <AxiomTag :type="result.score > 0.8 ? 'success' : result.score > 0.6 ? 'warning' : 'info'">
                        Score: {{ result.score.toFixed(4) }}
                      </AxiomTag>
                    </AxiomGroup>
                  </template>
                  <AxiomText>{{ result.text }}</AxiomText>
                  <template #footer>
                    <AxiomGroup justify="end">
                      <AxiomText size="small" type="tertiary">
                        来源知识库: {{ result.kb_name }}
                      </AxiomText>
                    </AxiomGroup>
                  </template>
                </AxiomCard>
              </AxiomGroup>
              <!-- 耗时分析 -->
              <div v-if="message.content.timing" class="timing-details">
                <AxiomDivider>查询耗时分析</AxiomDivider>
                <AxiomGroup justify="space-around" class="mt-2">
                  <AxiomGroup direction="vertical" align="center" gap="small">
                    <AxiomText size="large" type="primary"><b>{{ (message.content.timing.total_duration_ms / 1000).toFixed(2) }}</b>s</AxiomText>
                    <AxiomText size="small" type="secondary">
                      <AxiomIcon name="Clock" class="mr-1" />总耗时
                    </AxiomText>
                  </AxiomGroup>
                  <AxiomGroup direction="vertical" align="center" gap="small">
                    <AxiomText><b>{{ message.content.timing.embedding_duration_ms }}</b>ms</AxiomText>
                    <AxiomText size="small" type="secondary">
                      <AxiomIcon name="Cpu" class="mr-1" />Embedding
                    </AxiomText>
                  </AxiomGroup>
                  <AxiomGroup direction="vertical" align="center" gap="small">
                    <AxiomText><b>{{ message.content.timing.recall_duration_ms }}</b>ms</AxiomText>
                    <AxiomText size="small" type="secondary">
                      <AxiomIcon name="Search" class="mr-1" />召回
                    </AxiomText>
                  </AxiomGroup>
                  <AxiomGroup direction="vertical" align="center" gap="small">
                    <AxiomText><b>{{ message.content.timing.postprocessing_duration_ms }}</b>ms</AxiomText>
                    <AxiomText size="small" type="secondary">
                      <AxiomIcon name="Sort" class="mr-1" />后处理
                    </AxiomText>
                  </AxiomGroup>
                </AxiomGroup>
              </div>
              <!-- 渲染普通文本或错误 -->
              <AxiomCode v-else language="json" :code="typeof message.content === 'object' ? JSON.stringify(message.content, null, 2) : message.content" />
            </div>
          </div>
        </AxiomGroup>
        <AxiomGroup v-if="loading" justify="start">
          <div class="message-content">
            <AxiomLoading text="思考中..." />
          </div>
        </AxiomGroup>
      </AxiomGroup>
    </template>
    <template #footer>
      <div class="chat-input-area">
        <AxiomInput
          v-model="newMessage"
          placeholder="请输入您的问题..."
          size="large"
          clearable
          @keyup.enter="handleSend"
        >
          <template #append>
            <AxiomButton type="primary" icon="Promotion" @click="handleSend" />
          </template>
        </AxiomInput>
      </div>
    </template>
  </AxiomVerticalLayout>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { 
  AxiomInput, 
  AxiomButton, 
  AxiomBlockquote,
  AxiomCode,
  AxiomLoading,
  AxiomVerticalLayout,
  AxiomGroup,
  AxiomCard,
  AxiomTag,
  AxiomText,
  AxiomIcon,
  AxiomDivider,
} from 'axiom-view';

const props = defineProps({
  messages: {
    type: Array,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['send-message']);

const newMessage = ref('');
const verticalLayoutRef = ref(null);

function handleSend() {
  const content = newMessage.value.trim();
  if (!content) return;
  emit('send-message', content);
  newMessage.value = '';
}

watch(
  () => [...props.messages, props.loading],
  async () => {
    await nextTick();
    const container = verticalLayoutRef.value?.contentRef;
    if (container) {
      container.scrollTop = container.scrollHeight;
    }
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
.chat-panel {
  flex: 1;
  min-height: 0;

  :deep(.axiom-vertical-layout__content) {
    padding: var(--axiom-spacing-lg);
  }
}

.message-content {
  max-width: 80%;
}

.timing-details {
  background-color: var(--axiom-bg-color-tertiary);
  padding: var(--axiom-spacing-md);
  border-radius: var(--axiom-border-radius-base);
  margin-top: var(--axiom-spacing-lg);
}

.chat-input-area {
  padding: var(--axiom-spacing-md) var(--axiom-spacing-lg);
  border-top: 1px solid var(--axiom-border-color);
}
</style> 